<template>
  <div class="discoveryAnalysis">
    <!-- 圈子详情 -->
    <el-card shadow="hover">
      <!-- 圈子详情 -->
      <h4>圈子详情</h4>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>圈子数</h4>
          <div>
            <span class="numSpan">{{ 666 }}</span>
            <el-divider></el-divider>
            <span>{{ "2021 - 04 - 28" }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>圈子用户总数</h4>
          <div>
            <span class="numSpan">{{ 666 }}</span>
            <el-divider></el-divider>
            <span>{{ "2021 - 04 - 28" }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>圈子平均用户数</h4>
          <div>
            <span class="numSpan">{{ 666 }}</span>
            <el-divider></el-divider>
            <span>{{ "2021 - 04 - 28" }}</span>
          </div>
        </el-card>
        <el-card class="one">
          <h4>圈子渗透率</h4>
          <div>
            <span class="numSpan">{{ 666 }}</span>
            <el-divider></el-divider>
            <span>{{ "2021 - 04 - 28" }}</span>
          </div>
        </el-card>
      </div>

      <div class="circleSearch">
        <el-date-picker
          v-model="circleTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="circlePickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" icon="el-icon-search" @click="circleBtn"
          >查询搜索</el-button
        >
        <el-button class="btn" icon="el-icon-download">导出Excel</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="channel" label="时间"> </el-table-column>
        <el-table-column prop="addUserNums" label="寻找圈子人数">
        </el-table-column>
        <el-table-column prop="addUserNums" label="寻找圈子次数">
        </el-table-column>
        <el-table-column prop="addUserNums" label="加入圈子人数">
        </el-table-column>
        <el-table-column prop="totalUserNums" label="退出圈子人数">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />

      <!-- 圈子用户详情 -->
      <div class="chartBox">
        <div class="one">
          <div class="circleBtnBox">
            <h4>圈子用户详情</h4>
            <el-button class="btn" icon="el-icon-download">导出Excel</el-button>
          </div>
          <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>
        </div>
        <div class="one">
          <div class="btnBox">
            <el-button class="btn" icon="el-icon-download">导出Excel</el-button>
          </div>
          <div id="myChartB" :style="{ width: '100%', height: '500px' }"></div>
        </div>
      </div>
      <div class="mapBox">
        <div id="myChartC" :style="{ width: '100%', height: '500px' }"></div>
        <div class="mapList">
          <div class="mapListBtn">
            <el-select v-model="mapValue" placeholder="请选择排序方式">
              <el-option
                v-for="item in mapOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button class="btn" icon="el-icon-download">导出Excel</el-button>
          </div>
          <el-table :data="mapTableData" style="width: 100%">
            <el-table-column prop="channel" label="地区"> </el-table-column>
            <el-table-column prop="addUserNums" label="圈子数">
            </el-table-column>
            <el-table-column prop="addUserNums" label="用户数">
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalB > 0"
            :total="totalB"
            :page.sync="pageB"
            :limit.sync="pageSizeB"
            @pagination="getListB"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      //圈子详情
      circlePickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      circleTimeValStartDate: "",
      circleTimeValEndDate: "",
      circleTimeVal: "", //渠道增长时间
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      //地图列表
      mapOptions: [
        {
          value: "1",
          label: "圈子数倒叙排列",
        },
        {
          value: "2",
          label: "用户数正叙排列",
        },
        {
          value: "3",
          label: "用户数倒叙排列",
        },
      ],
      mapValue: "", //下拉框
      mapTableData: [],
      totalB: 0,
      pageB: 1, //页码
      pageSizeB: 10, //每页条数
    };
  },
  methods: {
    //圈子详情查询搜索
    circleBtn() {},
    pin() {
      // 基于准备好的dom，初始化echarts实例
      let myChartA = this.$echarts.init(document.getElementById("myChartA"));
      // 绘制图表
      myChartA.setOption({
        title: {
          text: "圈子用户性别分布",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["女", "男", "其他"],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "女" },
              { value: 310, name: "男" },
              { value: 234, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      // 基于准备好的dom，初始化echarts实例
      let myChartB = this.$echarts.init(document.getElementById("myChartB"));
      // 绘制图表
      myChartB.setOption({
        title: {
          text: "圈子用户年龄分布",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["女", "男", "其他"],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "女" },
              { value: 310, name: "男" },
              { value: 234, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

      // 基于准备好的dom，初始化echarts实例
      let myChartC = this.$echarts.init(document.getElementById("myChartC"));
      // 绘制图表
      myChartC.setOption({
        title: {
          text: "圈子地域与用户分布",
          subtext: "",
          left: "center",
        },
        visualMap: {
          show: true,
          min: 0, // 指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
          max: 1000, // 指定 visualMapContinuous 组件的允许的最大值
          text: ["High", "Low"], // 两端的文本，如 ['High', 'Low'] 如例子：http://www.echartsjs.com/gallery/editor.html?c=doc-example/map-visualMap-continuous-text&edit=1&reset=1
          textStyle: {
            color: "#6F7082",
          },
          realtime: false, // 拖拽时，是否实时更新。
          calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          hoverLink: true, // 打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
          //   inRange: {
          //     // inRange (object)定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）1、symbol: 图元的图形类别。2、symbolSize: 图元的大小。3、color: 图元的颜色。4、colorAlpha: 图元的颜色的透明度。5、opacity: 图元以及其附属物（如文字标签）的透明度。6、
          //     color: ["lightskyblue", "yellow", "orangered"],
          //   },
          pieces: [
            //根据数据大小，各省显示不同颜色
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b",
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce",
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#6f83db",
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7",
            },
            {
              lt: 10,
              label: "<10",
              color: "#bcc5ee",
            },
          ],
        },
        geo: {
          map: "china",
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          aspectScale: 0.75,
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: false,
              textStyle: {
                color: "#fbfbfb",
              },
            },
          },
          itemStyle: {
            normal: {
              //未选中状态
              areaColor: "#8FD0E8", //背景颜色
              borderColor: "#333",
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: "#fff",
              areaColor: "#1F307B",
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "map",
            roam: true,
            coordinateSystem: "geo",
            geoIndex: 0,
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#FFFD00",
              },
            },
            data: [
              // value可以对应的相应的颜色区域值
              {
                name: "北京",
                value: 120,
              },
              {
                name: "天津",
                value: 120,
              },
              {
                name: "上海",
                value: 80,
              },
              {
                name: "重庆",
                value: 100,
              },
              {
                name: "河北",
                value: 100,
              },
              {
                name: "河南",
                value: 100,
              },
              {
                name: "云南",
                value: 40,
              },
              {
                name: "辽宁",
                value: 120,
              },
              {
                name: "黑龙江",
                value: 100,
              },
              {
                name: "湖南",
                value: 80,
              },
              {
                name: "安徽",
                value: 80,
              },
              {
                name: "山东",
                value: 100,
              },
              {
                name: "新疆",
                value: 400,
              },
              {
                name: "江苏",
                value: 80,
              },
              {
                name: "浙江",
                value: 60,
              },
              {
                name: "江西",
                value: 80,
              },
              {
                name: "湖北",
                value: 100,
              },
              {
                name: "广西",
                value: 40,
              },
              {
                name: "甘肃",
                value: 120,
              },
              {
                name: "山西",
                value: 120,
              },
              {
                name: "内蒙古",
                value: 140,
              },
              {
                name: "陕西",
                value: 120,
              },
              {
                name: "吉林",
                value: 120,
              },
              {
                name: "福建",
                value: 60,
              },
              {
                name: "贵州",
                value: 80,
              },
              {
                name: "广东",
                value: 40,
              },
              {
                name: "青海",
                value: 100,
              },
              {
                name: "西藏",
                value: 40,
              },
              {
                name: "四川",
                value: 900,
              },
              {
                name: "宁夏",
                value: 140,
              },
              {
                name: "海南",
                value: 20,
              },
              {
                name: "台湾",
                value: 40,
              },
              {
                name: "香港",
                value: 200,
              },
              {
                name: "澳门",
                value: 20,
              },
            ],
          },
        ],
      });
    },
    //圈子详情时间
    focus(time) {
      if (!this.circleTimeVal) {
        this.circleTimeVal = [];
      }
      this.circleTimeValStartDate = this.circleTimeVal[0];
      this.circleTimeValEndDate = this.circleTimeVal[1];
    },
    //地图分页
    getListB() {},
  },
  mounted() {
    this.pin();
  },
};
</script>

<style lang="less" scoped>
.discoveryAnalysis {
  margin: 30px;
  height: 100%;
  .userStatisticsItem {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    .el-divider--horizontal {
      margin: 10px 0px;
    }
    .one {
      width: 300px;
      height: 100%;
      h4 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 10px;
      }
      .numSpan {
        font-size: 26px;
      }
    }
  }
  .searchBox {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
  }
  .el-table {
    margin-top: 20px;
  }
  .circleSearch {
    display: flex;
    justify-content: flex-end;
  }
  .chartBox {
    display: flex;
    margin-top: 80px;
    width: 100%;
    .one {
      width: 100%;
      .btnBox {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 40px;
      }
    }
  }
  .circleBtnBox {
    display: flex;
    justify-content: space-between;
    .el-button {
      margin-bottom: 40px;
      height: 40px;
    }
  }
  .mapBox {
    display: flex;
    margin-top: 60px;
    .mapList {
      width: 50%;
      .mapListBtn {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>